<template>
  <el-container style="border: 1px solid #eee">
    <!--      头部-->
    <el-header class="header" style="width: 100%!important;background-color: rgb(40,44,52);text-align: center">
      <el-row style="height: 100%;text-align: center">
        <el-col :span="3" style="height: 100%;text-align: center">
          <el-radio-group v-model="isCollapse" style="float: left;display: inline-block;padding: 10px">
            <el-radio-button :label="false">展开</el-radio-button>
            <el-radio-button :label="true">收起</el-radio-button>
          </el-radio-group>
        </el-col>
        <el-col :span="10" style="height: 100%">
          <div style="height: 100%!important;">
            <el-badge class="item" style="width: 100%">
              <el-carousel direction="vertical" style="height: 50px;" indicator-position="none" autoplay
                           :interval="8000">
                <!--              走马灯-->
                <el-carousel-item v-for="item in mottoList" :key="item">
                  <h3 style="width:100%;text-align: center;
                  color: rgb(207,232,167);margin-top: 10px" class="layui-icon layui-icon-speaker">{{ item }}</h3>
                </el-carousel-item>
              </el-carousel>
            </el-badge>
          </div>
          <!--            <el-badge class="item" style="width: 100%">-->
          <!--              <el-input placeholder="请输入内容" clearable v-model="input" class="input-with-select" style="width: 100%">-->
          <!--                <el-button slot="append" icon="el-icon-search">搜索</el-button>-->
          <!--              </el-input>-->
          <!--            </el-badge>-->
        </el-col>
        <el-col :span="8" style="height: 100%">
          <!--            <el-badge :value="200" :max="99" class="item">-->
          <!--              <el-button size="small">评论</el-button>-->
          <!--            </el-badge>-->
          <!--            <el-badge :value="100" :max="10" class="item">-->
          <!--              <el-button size="small">回复</el-button>-->

          <!--            </el-badge>-->
             <!--
         <el-badge class="item">
         
                 <span v-if="flag" style="color: rgb(24,144,255)" class="el-icon-location-outline">
                   当前位置：{{ location }}
                 </span>
            <span v-else style="color: #669900">
                   正在定位
                 </span>
          </el-badge>>
            -->
<el-badge :value="noticeTotal" class="item">
  <el-button  class="share-button" icon="el-icon-message-solid" @click="toNotice" type="primary"></el-button>
</el-badge>
        </el-col>
        <el-col :span="3" style="height: 100%;text-align: center">
          <!--             显示用户昵称-->
          <el-badge class="item-name" style="height: 100%;text-align: center">
            <el-button size="small" @click="PersonalInformation=true"
                       class="username" style="background-color: rgb(40,44,52)!important;color: #eee;border: none;display: inline-block;padding: 10px"
                       v-model="u_names">{{ UN }}
            </el-button>
          </el-badge>
          <el-dropdown style="text-align: center;height: 100%">
            <img :src="avatarSrc" class="avatar" style="display: flex;line-height: 100%">
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item @click.native="PersonalInformation=true">设置</el-dropdown-item>
              <el-dropdown-item @click.native="exit">退出</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>
    </el-header>

    <el-container style="height: 730px">
      <!--    侧边栏-->
      <el-aside class="el-menu-vertical-demo" :width="isCollapse ? '64px' : '170px'">
        <!--    default-active:打开首页  default-openeds:展开我的首页-->
        <!--      default-active="/index/Welcome" :default-openeds='["0"]'-->
        <el-menu :unique-opened="true" background-color="#282C34" router text-color="#fff" active-text-color="#ffd04b"
                 default-active="/index/Welcome" :default-openeds='["101"]'
                 :collapse="isCollapse" :collapse-transition="false">
          <!--          一级导航-->
          <el-submenu :index="item.menuid+''" v-for="item in MenuList" :key="item.menuid">
            <template slot="title">
              <i class="menu-home" :class="item.icon"></i>
              <span>{{ item.menuname }}</span>
            </template>
            <!--          二级菜单-->
            <el-menu-item :index="item2.path" v-for="item2 in item.children" :key="item2.menuid">
              <i :class="item2.icon"></i>
              <span>{{ item2.menuname }}</span>
            </el-menu-item>

          </el-submenu>

        </el-menu>
        <!--      当前城市-->
        <span class="el-icon-location-outline" v-if="temperature" style="margin-top: 50px;color: rgb(207,232,167)">
        {{ City }}  {{ temperature }}℃    {{ weather }}
      </span>
        <span style="margin-top: 50px;color: rgb(207,232,167)" v-else>

      </span>
      </el-aside>
      <!--主容器-->
      <el-main style="max-width: 100%">
        <router-view :key="$route.fullPath"></router-view>
        <!--        引入地图子组件-->
        <!--       v-show绑定是否展示 -->
        <!--        从子组件拿到天气及地理位置数据-->
        <!--       WeatherInfo、LocationInfo必须与子组件注册的一致-->
        <IndexMapView v-show="ShowView" @WeatherInfo="GetWeatherValue" @LocationInfo="GetLocationValue"></IndexMapView>

      </el-main>
    </el-container>
    <!--    右拉框-->
    <el-drawer title="我是标题" :visible.sync="PersonalInformation">
      <span>我来啦!</span>
    </el-drawer>
  </el-container>
</template>
<style>
.el-header {
  background-color: #B3C0D1;
  color: #333;
  line-height: 80px;
}

.el-aside {
  color: #333;
}
/deep/ .el-main {
  overflow: hidden;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  background-color: #282C34;
  height: 100%;
}
</style>
<script>
import router from '../../router/index'
//引入子地图组件
import IndexMapView from "./IndexMapView";

export default {
  data() {
    return {
      MenuList: [],
      ShowView: true,
      UN: '',
      City: '',
      weather: '',
      temperature: '',
      noticeTotal:5,
      input: '',
      location,
      isCollapse: false,//折叠
      flag: false,
      avatarSrc: '../../../static/avatar.jpg',//头像
      PersonalInformation: false,
      // 系统公告
      mottoList: [
        '等风来不如追风去，追逐的过程就是人生的意义',
        '当你想要放弃了，那就想想当初为什么开始',
        '自强之人谁也打不倒，自弃之人谁也带不动',
        '岁月风尘里，我们泪流满面的争吵与退让',
        '在难过的时候，不要忘记自己还要前进',
        '人心无底洞，填不满，掏不空'
      ],
    }
  },
// 监听,当路由发生变化的时候执行
  watch: {
    $route: {
      handler: function (NewPath, oldVal) {
        //每次路由变化，将当前路由保存到store
        this.$store.commit('BaseStore/UpdateCurrentPath', NewPath.path)
        //这里监听路由的变化，如果当前路由不为index就对地图子组件进行隐藏
        console.log(NewPath)
        if (NewPath.path !== '/index') {
          //对地图子组件进行不显示操作
          this.ShowView = false;
        } else {
          this.ShowView = true;
        }
      },
      // 深度观察监听
      deep: true
    }
  },
  //创建完成，加载菜单等信息
  created() {
    this.MenuList = this.$store.state.BaseStore.menus
    this.UN = this.$store.state.BaseStore.user.name
    this.$store.commit('BaseStore/UpdateCurrentPath', this.$route.path)
    if (this.$route.path !== '/index') {
      this.ShowView = false
    } else {
      this.ShowView = true
    }
  },
  methods: {
    toNotice(){//路由跳转
      this.$router.push("/physical/notice")
    },
    UpdateMenu() {
      this.MenuList = JSON.parse(window.sessionStorage.getItem('SetUser')).result.menu
      this.UN = JSON.parse(window.sessionStorage.getItem('SetUser')).result.name
    },
    GetMenus() {
      this.MenuList = this.$route.params.cyq.result.menu //获取菜单列表
      this.UN = this.$route.params.cyq.result.name
    },
    GetLocationValue(location) {//获取位置信息
      if (location) {
        this.location = location.location,
          this.flag = location.flag
      }
    },
    //获取天气信息
    GetWeatherValue(data) {
      this.City = data.city
      this.weather = data.weather
      this.temperature = data.temperature
    },
    //退出登录
    exit() {
      this.$confirm('将要退出登录，是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {

        this.$message({
          type: 'success',
          message: '退出成功',
          duration: 1000 //显示1s
        });
        //退出成功，删除token
        window.sessionStorage.removeItem('token')
        window.sessionStorage.removeItem('SetUser')
        this.MenuList = ''
        setTimeout(() => { //延时1s,返回登录页
          this.$router.push('/')
        }, 1000)
        //退出后刷新一下登录页面，防止新登录用户拥有上一次登录用户的信息
        window.location.reload();
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消',
          duration: 500 //显示0.5s
        });
      });
    },
    // goBack() {
    //   console.log('go back');
    // }
  },
  computed: {//计算属性
    menus() {
      // return  JSON.parse(window.sessionStorage.getItem('SetUser')).result.menu
    },
    u_names() {
      // return  JSON.parse(window.sessionStorage.getItem('SetUser')).result.name
    }
  },
  components: {
    IndexMapView
  }
};
</script>
<style>
.el-menu {
  border-right: none;
}

/*// 菜单选中背景色*/
/*.el-menu-item.is-active{*/
/*  background-color: #1890FF !important;*/
/*}*/
/*// 菜单悬浮背景色*/
.el-menu-item {
  font-size: 13px;
}

.el-menu-item:hover {
  font-size: 16px;
  background-color: #1890FF !important;
}

/*头部*/
.header {
  text-align: right;
  font-size: 12px;
  height: 50px;
  /*display: inline-block;*/
  background-color: #DCDFE6
}

.item, .item-name {
  margin-top: -20px;
  line-height: 30px;

}

/*显示用户昵称*/
.username {
  font-size: medium;
  background-color: #DCDFE6
}

/*消息提示类*/
.item {
  margin-right: 30px;
}

/*昵称*/
.item-name {
  margin-right: 0;
}

/*头像*/
.avatar {
  width: 40px;
  height: 40px;
  display: inline-block;
  line-height: 60%;
  /*margin-top: 4px;*/
  /*圆形*/
  border-radius: 50%;
  cursor: pointer;
  margin: 10px;
  /*头像边框*/
  border: 1px solid silver;
}
.el-col-3 {
    display: flex;
    align-items: center;
    /* justify-content: space-around; */
    width: 12.5%;
}
</style>

<style>
#app {
  margin-top: 0;
}

body {
  background-color: #eeeeee;
}
</style>
